<template>
  <div :class="'live-item '+(viewType == 'two'?'two':'')">
    <div class="live-img">
      <img v-lazy="image">
      <p class="live-img-team" v-if="isGroup">拼团</p>
      <p class="live-content" >{{livestate_des}}</p>
    </div>
    <div style="padding: 6px 10px 12px;width:100%;height:104px;border-radius: 0 0 0.02rem 0.02rem;">
      <p class="live-state living" :class="livestate_class">{{livestate_des2}}</p>
      <p class="live-title shuang wordBreak">{{title}}</p>
      <p class="live-price" >{{pricex}}</p>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: {
    // 直播块都是一行2个了，订单页没复用这个
    viewType: {
      type: String,
      default: ""
    },
    image: {
      type: String,
      default: ""
    },
    // 直播状态 1待开播 2直播中 3已结束 4直播回放
    liveState: {
      type: Number,
      default: null
    },
    // 直播状态描述
    liveTitle: {
      type: String,
      default: ""
    },
    price: {
      type: String,
      default: ""
    },
    startTime: {
      type: String,
      default: ""
    },
    endTime: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    isGroup: {
      type: [Number,String,Boolean],
    }
  
  },
  data() {
    return {
      livestate_class: "",
      livestate_des: "",
      livestate_des2: "",
      pricex: ""
    };
  },
  mounted() {
    console.log(this.liveState)
    // 1待开播 2直播中 3已结束 4直播回放
    switch (this.liveState) {
      case 1:
        this.livestate_class = "livewait";
        this.livestate_des = this.startTime + " 开播";
        // this.livestate_des2 = "待开播";c
        this.livestate_des2 = "直播中";
        break;
      case 2:
        this.livestate_class = "living";
        this.livestate_des = this.startTime + " 开播";
        // this.livestate_des2 = "直播中";
        this.livestate_des2 = "待开播";
        break;
      case 3:
       
        this.livestate_class = "liveback";
        this.livestate_des = this.endTime + " 结束";
        this.livestate_des2 = "查看回放"  ;
        
        break;

     
    }
   
    
    this.pricex = this.price == "0.00" ? "免费" : "￥" + this.price;
  },
  computed: {
    ...mapState(["img_url"])
  }
};
</script>
<style scoped lang="scss">
.live-item {
  float: left;
  width: 1.7rem;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  // 直播2行 暂时处于没人用状态
  &.two {
    float: initial !important;
    width: 100% !important;
    flex-direction: row !important;
    padding: 0 0 !important !important;
    .live-box img {
      width: 1.25rem !important;
      height: 0.7rem !important;
    }
    .live-title {
      width: 100% !important;
      height: 0.7rem !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      margin-left: 0.06rem !important;
      margin-top: 0 !important;
      > span {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .live-about {
        display: flex;
        justify-content: space-between;
        .live-time {
          font-size: 0.12rem;
          color: #c0c4cc;
          line-height: 0.17rem;
        }
        .live-price {
          font-size: 0.14rem;
          color: #0086fe;
          line-height: 0.16rem;
        }
      }
    }
    .live-bottom {
      p {
        color: #c0c4cc;
        font-size: 0.12rem;
      }
      span {
        color: #0486fe;
        font-size: 0.14rem;
      }
    }
  }
}

.live-img {
  position: relative;
  &-team {
    position: absolute;
    top: 0.06rem;
    right: 0.06rem;
    width: 0.3rem;
    height: 0.16rem;
    line-height: 0.14rem;
    border-radius: 0.1rem;
    text-align: center;
    color: #ffffff;
    font-size: 0.1rem;
    background-color: #F56C6C;
    border: 1px solid #fff;
  }
  img {
    width: 1.7rem;
    height: 0.95rem;
    border-radius: 0.02rem 0.02rem 0 0;
  }
}

.live-state{
  height: 0.14rem;
  line-height: 0.14rem;
  font-size: .1rem;
  &.living {
    color: #0088FF;
  }
  &.livewait {
    color: #FFA400;
  }
  &.liveback {
    color: #67c23a;
  }
  &.liveend {
    color: #909399;
  }
}

.live-content {
  color: #FFFFFF;
  font-size: 0.12rem;
  line-height: 0.16rem;
  position: absolute;
  bottom: .03rem;
  left: .06rem;
}

.live-title {
  color: #303133;
  font-size: 0.16rem;
  line-height: 0.22rem;
  height: 0.44rem;
  margin-top: 0.04rem;
}

.live-price {
  color: #0088FF;
  font-size: 0.14rem;
  line-height: 0.16rem;
  margin-top: 0.06rem;
}

</style>


